import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { SongMenuPageWrapper } from "./style";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import AreaItemv1 from "@/components/area-itemv1";
import SkeletonListv1 from "@/components/skeleton-listv1";

interface IProps {
  children?: ReactNode;
}

const SongMenuPage: FC<IProps> = () => {
  const { allPlaylist } = useAppSelector((state) => ({
    allPlaylist: state.musicLibrary.allPlaylist
  }), shallowEqual)
  return <SongMenuPageWrapper>
    {allPlaylist.length <= 0 &&
      <SkeletonListv1 />
    }
    {allPlaylist.length > 0 &&
      allPlaylist.map(item => (
        <AreaItemv1 key={item.id} itemDate={item} urlwidth={400} navigatePath={'/playlist'} />
      ))
    }
  </SongMenuPageWrapper>;
};

export default memo(SongMenuPage);